<template>
  <div class="user-detail-box">
    <el-form ref="form" v-loading="loading" :model="formData">
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
          :style="item.itemStyle || {}"
        >
          <span v-if="item.prop">{{ formData[item.prop] }}</span>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        fullName: null,
        userName: null,
        deptName: null,
        roleName: null,
        position: null,
        post: null,
        mobilePhone: null,
        email: null,
        address: null,
        status: null,
        delFlag: null,
        remark: null,
        createBy: null,
        createTm: null,
        modifyTm: null
      },
      loading: false,
      formList: [
        { name: '基本信息', prop: '', itemClass: 'form-sub-title ' },
        { name: '姓名：', prop: 'fullName' },
        { name: '状态：', prop: 'statusName' },
        { name: '手机号码：', prop: 'mobilePhone' },
        { name: '邮箱：', prop: 'email' },
        { name: '联系地址：', prop: 'address', itemClass: 'width100p' },
        { name: '岗位信息', prop: '', itemClass: 'form-sub-title  pt20' },
        { name: '所属机构：', prop: 'deptName' },
        { name: '角色：', prop: 'roleName' },
        { name: '职位：', prop: 'position' },
        { name: '岗位：', prop: 'post' },
        { name: '账户信息', prop: '', itemClass: 'form-sub-title  pt20' },
        { name: '用户名：', prop: 'userName' },
        { name: '创建人：', prop: 'createBy' },
        { name: '备注：', prop: 'remark' },
        { name: '创建时间：', prop: 'createTm' },
        { name: '删除标识：', prop: 'delFlagName' },
        { name: '最后一次修改密码时间：', prop: 'modifyTm' }
      ]
    }
  },
  watch: {
    popData: {
      handler(data) {
        if (data) {
          this.getDetailData({ id: data.id })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 获取详情数据
     */
    getDetailData(params) {
      this.loading = true
      this.$api.userManage
        .detail(params)
        .then((res) => {
          if (Number(res.code) === 1000) {
            this.formList.forEach((e) => {
              this.$set(this.formData, e.prop, res.data[e.prop])
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/pageCom.scss';
.user-detail-box {
  color: #333;
  padding: 0 20px;

  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: 50%;
      margin: 0;
      padding-left: 10px;

      .el-form-item__label {
        color: #666;
        padding-right: 5px;
      }

      .el-form-item__content {
        padding: 0;
      }

      &.form-sub-title {
        width: 100%;
        padding-left: 0;
        margin-bottom: 20px;

        &.pt20 {
          padding-top: 20px;
        }
      }

      &.width100p {
        width: 100%;
      }
    }
  }
}
</style>
